<template>
	<view class="messagePage myBackground">
		<view class="content pl15 pr15">
			<scroll-view scroll-y class="h100p w100p">
				<view class="mb20">
					<view class="d-flex a-center mb15">
						<view class="line mr5"></view>
						<view class="title">一号楼一层能耗分布</view>
					</view>
					<view class="mb15">
						<view class="item_box" style="height: 500rpx;width: 100%;">
							<echartsUniapp ref="echarts1" :option="nhOption" canvasId="echarts1"></echartsUniapp>
						</view>
					</view>
				</view>
				<view class="mb20">
					<view class="d-flex a-center mb15">
						<view class="line mr5"></view>
						<view class="title">一号楼一层能耗排名</view>
					</view>
					<view class="item_box p15">
						<view class="d-flex flex-column j-sb">
							<view class="d-flex a-center mt10" v-for="(item,index) in nhpmData" :key="index">
								<view class="width-30 d-flex a-center font-white">
									<view class="border_three pt5 pb5 pl10 pr10 mr10">{{index + 1}}</view>
									<view class="fs14">{{item.xValue}}</view>
								</view>
								<view class="width-70 d-flex a-center j-sb">
									<view style="width: 260rpx;">
										<u-line-progress :percentage="$formatNumber(item.yValue)==0?0:$formatNumber(item.percent)"
											:showText="false" activeColor="#3F7EFF" />
									</view>
									<view class="fs12">{{$formatNumber(item.yValue)}} kW·H</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="d-flex a-center mb15">
						<view class="line mr5"></view>
						<view class="title d-flex-center">
							<view>一号楼一层房间能耗</view>
							<view class="fs14 ml5">(kW·H)</view>
						</view>
					</view>
					<view class="d-flex flex-wrap a-center j-sb">
						<view class="item_box width-47 mb15 p10 boxSizing" v-for="(item,index) in classroomLoadData" :key="index">
							<view class="d-flex a-center mb5">
								<view class="point mr5"></view>
								<view>{{classroomData[index]}}</view>
							</view>
							<view class="">
								<view class="height28p mt15 itemBoxPadding bdr4" v-for="(itemY, indexY) in item.deviceShowDetailList"
									:key="indexY">
									<view class="w100p h100p d-flex a-center">
										<view class="d-flex-center mr5">
											<image style="width: 50rpx; height: 50rpx;" mode="aspectFill"
												:src="indexY==0?'/static/img/feature/children/kt_blue.png':'/static/img/feature/children/cz_blue.png'">
										</view>
										<view class="flex-1 d-flex-center fs20">
											{{itemY.deviceValue}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 10rpx;"></view>
			</scroll-view>
		</view>

		<!-- <tab-bar-view :tabCode="'1'"></tab-bar-view> -->
	</view>
</template>

<script>
	import echartsUniapp from "@/components/echarts-uniapp/echarts-uniapp.vue"
	import {
		queryOneListEnergyByAppReport,
		queryTwoListEnergyByAppReport,
		queryThreeListEnergyByAppReport
	} from "@/api/dormBuilding/oneBuildOneFloor.js"

	export default {
		components: {
			echartsUniapp
		},
		data() {
			return {
				timeout: [],

				nhOption: {},
				nhpmData: [],
				classroomData: ['1101室', '1102室', '1103室', '1104室', '1105室', '1106室', '1107室', '1108室',
					'1109室', '1110室', '1111室', '1112室', '1114室', '1115室', '宿管间'
				],
				classroomLoadData: []
			};
		},
		mounted() {
			this.queryOneListEnergyByAppReport()
			this.queryTwoListEnergyByAppReport()
			this.queryThreeListEnergyByAppReport()

			this.setupTimer()
		},
		methods: {
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryOneListEnergyByAppReport()
					_this.queryTwoListEnergyByAppReport()
					_this.queryThreeListEnergyByAppReport()
				}, 15000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
					})
				}
			},

			async queryOneListEnergyByAppReport() {
				await queryOneListEnergyByAppReport().then(res => {
					let tempData = res.object || []
					let arrData = []

					for (var i = 0; i < tempData.length; i++) {
						arrData.push({
							value: this.$formatNumber(tempData[i].yValue),
							name: tempData[i].xValue,
						})
					}
					let myData = {
						tooltip: {
							trigger: 'item',
							formatter: "{b} : {c} ({d}%)"
						},
						legend: {
							top: '5%',
							left: 'center'
						},
						series: [{

							type: 'pie',

							radius: '50%',

							center: ["50%", "60%"],

							data: arrData,

							emphasis: {

								itemStyle: {

									shadowBlur: 10,

									shadowOffsetX: 0,

									shadowColor: 'rgba(0, 0, 0, 0.5)',

								},

							},

							label: {
								formatter: '{c}'
							},

						}]
					};

					this.nhOption = myData
				})
			},
			async queryTwoListEnergyByAppReport() {
				await queryTwoListEnergyByAppReport().then(res => {
					this.nhpmData = res.object
				})
			},
			async queryThreeListEnergyByAppReport() {
				await queryThreeListEnergyByAppReport().then(res => {
					let tempData = res.object || []

					for (var i = 0; i < tempData.length; i++) {
						for (var j = 0; j < tempData[i].deviceShowDetailList.length; j++) {
							tempData[i].deviceShowDetailList[j].deviceValue = this.$formatNumber(tempData[i]
								.deviceShowDetailList[j].deviceValue)
						}
					}

					this.classroomLoadData = tempData
				})
			},

			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/loadAndEnergy.css");

	page {
		background-color: #f5f5f5;
	}
</style>